<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org/">
<head th:replace="common/commonSrc :: commonHead(~{::title},~{::link},~{})">
    <title>注册/找回密码</title>
    <link rel="stylesheet" href="/alert/message.css">
    <link rel="stylesheet" href="/loginFrom/loginFrom.css">
</head>
<body>
<div th:replace="common/commonSrc :: commonContent"></div>

<div class="htmleaf-container"
     style="width: 100%;height: 100%;margin: 0;padding: 0;animation: bgLoad 2s;animation-fill-mode: forwards;">
    <div id="wrapper" class="login-page" style="left: 2%;position:relative;padding-top: 7%;">
        <div id="login_form" class="form">


            <form class="login-form" id="regFrom">
                <label for="email"></label><input type="text" placeholder="邮箱(xxxxx@xx.com)" value="" id="email"/>
                <label for="password"></label><input type="password" placeholder="密码(6-18位数字字母)" id="password"/>
                <label for="passwordConfirm"></label><input type="password" placeholder="确认密码" id="passwordConfirm"/>
                <label for="playerName"></label><input type="text" placeholder="游戏昵称(3-16位英文字母)" id="playerName"/>
                <button class="fromButton" id="register">注 册</button>
                <p class="fromMessage"><a href="#">找回密码</a></p>

            </form>

            <form class="register-form" id="zhFrom">
                <label for="zhEmail"></label><input type="text" placeholder="邮箱(xxxxx@xx.com)" value="" id="zhEmail"/>
                <label for="zhPlayerName"></label><input type="text" placeholder="游戏昵称(3-16位英文字母)" id="zhPlayerName"/>
                <button class="fromButton" id="zh">找回密码</button>
                <p class="fromMessage"><a href="#">前往注册</a></p>

            </form>

            <div class="message-from" style="display: none" id="successFrom">
                <p class="fromMessage">注册成功</p>
            </div>
        </div>
    </div>
</div>


<nav th:replace="common/commonSrc :: commonNavFoot(~{})"></nav>
</body>
<div th:replace="common/commonSrc :: commonFoot(~{::script})">
    <script type="text/javascript" th:src="@{/alert/message.js}"></script>
    <script type="text/javascript">

        $(function () {
            $("#zh").click(function () {
                check_zh();
                return false;
            });
            $("#register").click(function () {
                check_register();
                return false;
            });
            $('.fromMessage a').click(function () {
                $('form').animate({
                    height: 'toggle',
                    opacity: 'toggle'
                }, 'slow');
            });
        });

        function check_register() {
            let email = $("#email");
            if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.val())) {
                wrongMessage("请输入正确的邮箱", email);
                return;
            }

            let password = $("#password");
            if (!/^[a-zA-Z]\w{5,17}$/.test(password.val())) {
                wrongMessage("密码必须是6-18位数字和字母", password);
                return;
            }

            let passwordConfirm = $("#passwordConfirm");
            if (passwordConfirm.val() !== password.val()) {
                wrongMessage("两次密码输入不一致", passwordConfirm);
                return;
            }

            let playerName = $("#playerName");
            if (!/^\w{3,16}$/.test(playerName.val())) {
                wrongMessage("游戏昵称必是3-16位英文字母", playerName);
                return;
            }

            $.ajax({
                type: 'POST',
                url: getRootPath() + 'doRegister',
                data: {
                    email: email.val(),
                    password: password.val(),
                    playerName: playerName.val()
                },
                beforeSend: function () {
                    showModal(true);
                },
                complete: function () {
                    showModal();
                },
                success: function (res) {
                    res = JSON.parse(res);
                    if (res.code === "1") {
                        $("#regFrom").css("display", "none");
                        const successFrom = $("#successFrom");
                        successFrom.text('注册成功，快去登陆游戏吧！');
                        successFrom.css({
                            "display": "block",
                            "font-size": "20px",
                            "color": "#24943d",
                            "font-weight": "bold"
                        });
                        $.message({
                            message: '注册成功，快去登陆游戏吧！'
                        });
                        let $loginForm = $("#login_form");
                        $loginForm.css("background","url('/images/background/middleGui.png') no-repeat")
                        $loginForm.css("background-size","100% 100%")
                    } else {
                        let returnMessage = res.message;
                        let dhIndex = returnMessage.indexOf(",");
                        if (dhIndex !== -1) {
                            let showMessage = returnMessage.substring(0, dhIndex);
                            let pick$ = returnMessage.substring(dhIndex + 1, returnMessage.length);
                            wrongMessage(showMessage, $("#" + pick$));
                        } else {
                            wrongMessage(returnMessage, null);
                        }
                    }
                }
            });
        }

        function check_zh() {
            let zhEmail = $("#zhEmail");
            if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(zhEmail.val())) {
                wrongMessage("请输入正确的邮箱", zhEmail);
                return;
            }
            let zhPlayerName = $("#zhPlayerName");
            if (!/^\w{3,16}$/.test(zhPlayerName.val())) {
                wrongMessage("游戏昵称必是3-16位英文字母", zhPlayerName);
                return;
            }
            $.ajax({
                type: 'POST',
                url: getRootPath() + '/backPassword',
                data: {
                    email: zhEmail.val(),
                    playerName: zhPlayerName.val()
                },
                beforeSend: function () {
                    showModal(true);
                },
                complete: function () {
                    showModal();
                },
                success: function (res) {
                    res = JSON.parse(res);
                    console.log(res);
                    if (res.code === "1") {
                        $("#zhFrom").css("display", "none");
                        const successFrom = $("#successFrom");
                        successFrom.text("已发送邮件找回密码邮件，请及时查收。");
                        successFrom.css({
                            "display": "block",
                            "font-size": "14px",
                            "color": "#24943d",
                            "font-weight": "bold"
                        });
                        $.message({
                            message: '已发送邮件找回密码邮件，请及时查收。'
                        });
                        let $loginForm = $("#login_form");
                        $loginForm.css("background","url('/images/background/middleGui.png') no-repeat")
                        $loginForm.css("background-size","100% 100%")
                    } else {
                        let returnMessage = res.message;
                        let dhIndex = returnMessage.indexOf(",");
                        if (dhIndex !== -1) {
                            let showMessage = returnMessage.substring(0, dhIndex);
                            let pick$ = returnMessage.substring(dhIndex + 1, returnMessage.length);
                            wrongMessage(showMessage, $("#" + pick$));
                        } else {
                            wrongMessage(returnMessage, null);
                        }
                    }
                }
            });
        }

        function wrongMessage(message, clear$) {
            if (clear$ != null) {
                clear$.val("");
                clear$.focus();
            }
            $("#login_form").removeClass('shake_effect');
            setTimeout(function () {
                $("#login_form").addClass('shake_effect')
            }, 1);
            $.message({
                message: message,
                type: 'error'
            });
        }


    </script>
</div>
</html>